import React,{useState,useContext,createContext} from 'react'

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};
const themeContext = createContext(themes.light)
const useContextTest = () => {
  const [theme, setTheme] = useState('red')
  return (
    <themeContext.Provider value={ {theme, setTheme} }>
      <div>
        <p className={theme}>{theme}</p>
        <ChildA/>
        <ChildB/>
      </div>
    </themeContext.Provider>
)
}

const ChildA = ()=>{
  const {setTheme} = useContext(themeContext)
  return(
    <button onClick={()=>{setTheme('red')}}>red</button>
  )
}
const ChildB = ()=>{
  const {setTheme} = useContext(themeContext)
  return(
    <button onClick={()=>{setTheme('blue')}}>blue</button>
  )
}
export default useContextTest